<template>
  <view class="favorite-container">
    <!-- 收藏列表 -->
    <scroll-view 
      scroll-y 
      class="favorite-scroll"
      @scrolltolower="loadMore"
      @refresherrefresh="onRefresh"
      refresher-enabled
      :refresher-triggered="isRefreshing"
    >
      <!-- 空收藏夹 -->
      <view v-if="favoriteList.length === 0" class="empty-favorite">
        <image src="/static/images/empty-favorite.png" mode="aspectFit"></image>
        <text class="empty-tip">收藏夹还是空的</text>
        <text class="empty-desc">快去收藏心仪的商品吧~</text>
        <button class="go-shopping" @tap="goShopping">
          <text>去逛逛</text>
          <uni-icons type="right" size="14" color="#fff"></uni-icons>
        </button>
      </view>

      <!-- 收藏列表 -->
      <view v-else class="favorite-list">
        <view 
          class="favorite-item"
          v-for="item in favoriteList" 
          :key="item.id"
          @click="toProductDetail(item)"
        >
          <image class="product-image" :src="item.mainImage" mode="aspectFill"></image>
          <view class="product-info">
            <text class="product-name">{{ item.name }}</text>
            <text class="product-desc">{{ item.description }}</text>
            <view class="product-bottom">
              <view class="price-wrap">
                <text class="price-symbol">¥</text>
                <text class="price-value">{{ item.price.toFixed(2) }}</text>
              </view>
              <button 
                class="unfavorite-btn"
                @click.stop="handleUnfavorite(item)"
              >
                <uni-icons type="heart-filled" size="16" color="#ff5500"></uni-icons>
                <text>取消收藏</text>
              </button>
            </view>
          </view>
        </view>
      </view>

      <!-- 加载更多 -->
      <uni-load-more :status="loadMoreStatus"></uni-load-more>
    </scroll-view>
  </view>
</template>

<script>
import { formatDate } from '@/utils/date'

export default {
  data() {
    return {
      favoriteList: [],
      isRefreshing: false,
      loadMoreStatus: 'more',
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  onShow() {
    this.loadFavoriteList(true)
  },
  methods: {
    formatDate,
    // 加载收藏列表
    async loadFavoriteList(refresh = false) {
      if (refresh) {
        this.pagination.pageNum = 1
        this.loadMoreStatus = 'more'
      }

      try {
        const res = await this.$api.product.favorite.getUserFavorites({
          pageNum: this.pagination.pageNum,
          pageSize: this.pagination.pageSize
        })

        if (res.code === 200 && res.data) {
          const { records, total } = res.data
          
          // 更新列表数据
          if (refresh) {
            this.favoriteList = records
          } else {
            this.favoriteList = [...this.favoriteList, ...records]
          }
          
          // 更新分页信息
          this.pagination.total = total
          
          // 更新加载状态
          this.loadMoreStatus = this.favoriteList.length >= total ? 'noMore' : 'more'
        }
      } catch (error) {
        console.error('加载收藏列表失败:', error)
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      } finally {
        if (refresh) {
          this.isRefreshing = false
        }
      }
    },

    // 取消收藏
    async handleUnfavorite(item) {
      try {
        const res = await uni.showModal({
          title: '提示',
          content: '确定要取消收藏该商品吗？',
          confirmColor: '#ff5500'
        })
        
        if (!res.confirm) return
        
        await this.$api.product.favorite.cancel(item.id)
        
        // 从列表中移除
        const index = this.favoriteList.findIndex(i => i.id === item.id)
        if (index > -1) {
          this.favoriteList.splice(index, 1)
        }
        
        uni.showToast({
          title: '已取消收藏',
          icon: 'success'
        })
      } catch (error) {
        console.error('取消收藏失败:', error)
        uni.showToast({
          title: '操作失败',
          icon: 'none'
        })
      }
    },

    // 跳转到商品详情
    toProductDetail(item) {
      uni.navigateTo({
        url: `/pages/product/detail/index?id=${item.id}`
      })
    },

    // 去购物
    goShopping() {
      uni.switchTab({
        url: '/pages/index/index'
      })
    },

    // 下拉刷新
    async onRefresh() {
      this.isRefreshing = true
      await this.loadFavoriteList(true)
    },

    // 加载更多
    loadMore() {
      if (this.loadMoreStatus === 'noMore') return
      
      this.pagination.pageNum++
      this.loadFavoriteList()
    }
  }
}
</script>

<style lang="scss" scoped>
.favorite-container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: env(safe-area-inset-bottom);
}

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 88rpx;
  background: linear-gradient(to right, #ff7300, #ff5500);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 30rpx;
  box-shadow: 0 2rpx 20rpx rgba(255, 85, 0, 0.15);

  .title {
    font-size: 32rpx;
    color: #fff;
    font-weight: bold;
  }
}

.favorite-scroll {
  height: 100vh;
}

.empty-favorite {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 160rpx 0;

  image {
    width: 280rpx;
    height: 280rpx;
    margin-bottom: 40rpx;
  }

  .empty-tip {
    font-size: 36rpx;
    color: #333;
    font-weight: bold;
    margin-bottom: 16rpx;
  }

  .empty-desc {
    font-size: 28rpx;
    color: #999;
    margin-bottom: 60rpx;
  }

  .go-shopping {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 260rpx;
    height: 88rpx;
    background: linear-gradient(to right, #ff7300, #ff5500);
    border-radius: 44rpx;
    box-shadow: 0 10rpx 30rpx rgba(255, 85, 0, 0.2);
    transition: all 0.3s;

    text {
      font-size: 30rpx;
      color: #fff;
      margin-right: 8rpx;
    }

    &:active {
      transform: scale(0.96);
      box-shadow: 0 5rpx 15rpx rgba(255, 85, 0, 0.15);
    }
  }
}

.favorite-list {
  padding: 20rpx;

  .favorite-item {
    display: flex;
    background-color: #fff;
    border-radius: 16rpx;
    padding: 24rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
    transition: all 0.3s;

    &:active {
      transform: scale(0.98);
    }

    .product-image {
      width: 220rpx;
      height: 220rpx;
      border-radius: 12rpx;
      background-color: #f5f5f5;
      box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
    }

    .product-info {
      flex: 1;
      margin-left: 24rpx;
      display: flex;
      flex-direction: column;

      .product-name {
        font-size: 30rpx;
        color: #333;
        font-weight: 600;
        margin-bottom: 12rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        line-height: 1.4;
      }

      .product-desc {
        font-size: 26rpx;
        color: #666;
        margin-bottom: 24rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        line-height: 1.4;
      }

      .product-bottom {
        margin-top: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .price-wrap {
          display: flex;
          align-items: baseline;

          .price-symbol {
            font-size: 26rpx;
            color: #ff5500;
            font-weight: bold;
            margin-right: 2rpx;
          }

          .price-value {
            font-size: 36rpx;
            color: #ff5500;
            font-weight: bold;
          }
        }

        .unfavorite-btn {
          display: flex;
          align-items: center;
          padding: 12rpx 24rpx;
          background-color: #fff5f0;
          border-radius: 32rpx;
          border: 2rpx solid #ff5500;
          transition: all 0.3s;

          text {
            font-size: 26rpx;
            color: #ff5500;
            margin-left: 8rpx;
            font-weight: 500;
          }

          &:active {
            transform: scale(0.95);
            background-color: #fff0e6;
          }
        }
      }
    }
  }
}
</style> 